*{
    box-sizing: border-box;
}
html, body{
    margin: 0;
    padding: 0;
    color: #333;
    font-size: 14px;
}


.h-100 {
    height: 100%;
}
.w-100 {
    width: 100%;
}

.h-vh {
    height: 100vh;
}
.w-vw {
    width: 100vw;
}


.overflow{overflow:hidden;}
.pull-left{float:left;}
.pull-right{float:right;}
.f-12{font-size:12px;}
.f-14{font-size:14px;}
.f-16{font-size:16px;}
.f-18{font-size:18px;}
.f-20{font-size:20px;}
.bold{font-weight:bold;}
.m-l-5{margin-left:5px;}
.m-l-8{margin-left:8px;}
.m-l-10{margin-left:10px;}
.m-l-15{margin-left:15px;}
.m-l-20{margin-left:20px;}
.m-l-30{margin-left:30px;}
.m-t-5{margin-top:5px;}
.m-t-8{margin-top:8px;}
.m-t-10{margin-top:10px;}
.m-t-15{margin-top:15px;}
.m-t-20{margin-top:20px !important;}
.m-t-30{margin-top:30px !important;}
.m-t-50{margin-top:50px !important;}
.m-t-100{margin-top:100px !important;}
.p-l{padding-left:15px;}
.p-r{padding-right:15px;}
.p-l-15{padding-left:15px;}
.p-r-15{padding-right:15px;}


.text-left{text-align:left !important;}
.text-center{text-align:center !important;}
.text-justify{text-align:justify !important;}
.text-right{text-align:right !important;}
.font-bold{font-weight:bold;}
.underline{text-decoration:underline;}
.w-100{width:100% !important;}
.h-100{height:100% !important;}
.block{display:block;}
.overflow{overflow:hidden;}
.relative{position:relative;}
.absolute{position:absolute;}

.flex{display: flex;}
.flex-1{flex: 1;}

.pointer{cursor: pointer;}


.color-forbidden{
    color: #F56C6C;
}





.el-message-box {
    max-width: 80%;
}

@media screen and (max-device-width:$mediaCriticalWidth) {
    .el-dialog {
        width: 90%;
    }
}